
import * as THREE from '../../build/three.module.js';
import { OrbitControls } from '../../jsm/controls/OrbitControls.js';
// import * as Stats from "../../jsm/libs/stats.module.js";
// import Stats  from "../../jsm/libs/stats.module.js";
 
var containerDom = document.getElementById("container");

var width = window.innerWidth,
  height = window.innerHeight;

// Create a renderer and add it to the DOM.
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.setSize(width, height);
//document.body.appendChild(renderer.domElement);
containerDom.appendChild(renderer.domElement);
// Create the scene 
var scene = new THREE.Scene();
// Create a camera
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
//var camera = new THREE.OrthographicCamera(-1000,1000,1000,-1000,0.1,10000);
camera.position.z = 50;

scene.add(camera);

// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(50, 100, 30);
scene.add(light);


// Add OrbitControls so that we can pan around with the mouse.
var controls = new OrbitControls(camera, renderer.domElement);

// Add axes  坐标创建
var axes = new THREE.AxisHelper(50);
scene.add(axes);

//物体创建
var geometry = new THREE.BoxGeometry(5, 5, 1);
var cubeMaterial = new THREE.MeshLambertMaterial();
var mesh = new THREE.Mesh(geometry, cubeMaterial);
mesh.position.set(1, 3, 0);
mesh.scale.multiplyScalar(4);
mesh.rotation.x = Math.PI / 2;
scene.add(mesh);
mesh.castShadow = true;

//地面创建
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0x555999 });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI
plane.position.set(0, -10, 0)
scene.add(plane);
plane.receiveShadow = true;

//环境光
var ambientLight = new THREE.AmbientLight(0x999999);
scene.add(ambientLight)

//聚光灯
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-60, 40, 45);
spotLight.castShadow = true;
spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
spotLight.shadow.camera.far = 500; 
spotLight.shadow.camera.near = 40;
scene.add(spotLight);
 
resize();
animate();
window.addEventListener('resize', resize);

function resize() {
  let w = window.innerWidth;
  let h = window.innerHeight;

  renderer.setSize(w, h);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

var sts = addStatus();

// Renders the scene
function animate() { 
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.005;
  mesh.rotation.z += 0.005;

  requestAnimationFrame(animate);
  renderer.render(scene, camera);  
  controls.update();

  sts.update(); 
   
}

function addStatus(){
  var stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.right = '0px';
  stats.domElement.style.top = '0px';
  stats.showPanel(0);
  document.getElementById('myStats').appendChild(stats.dom);
  return stats; 
}